<template>
	<view class="paysuccess">
		<view class="wanl-paysuccess">
			<view class="paysuccess__success">
				<block v-if="orderInfo">
					<text class="success__text" v-for="item in orderInfo.list" :key="item.id">
						订单号：{{ item.order_no }}
					</text>
				</block>
				<block v-else>
					<text class="success__text">订单号：{{ orderPayData.order_no }}</text>
				</block>
				<text class="dingdan1" v-if="orderInfo.list">
					￥{{ allPrice || 0  }}
				</text>
				<text class="dingdan1" v-else> ￥{{ orderPayData.price||0 }} </text>
			</view>
			<view class="wanl-paysuccess__img">
				<view class="img__success">
					<view class="wanl-success__text">
						<view class="item-success">
							<view class="success">
								<image :src="BaseUrl + '/static/catering/balance.png'" mode="scaleToFill" />
								<view class="item-text">
									<text class="text-1">余额支付</text>
									<text class="text-2">可用余额￥{{ balance }}</text>
								</view>
							</view>

							<view :class="isFinite == 1 ? 'item-icon1' : 'item-icon'" @click="clickThis(1)">
							</view>
						</view>
						<view class="item-success">
							<view class="success">
								<image :src="BaseUrl + '/static/catering/wechat .png'" mode="scaleToFill" />
								<view class="item-text">
									<text class="text-1">微信支付</text>
									<text class="text-2">推荐使用微信支付</text>
								</view>
							</view>

							<view :class="isFinite == 3 ? 'item-icon1' : 'item-icon'" @click="clickThis(3)">
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="wanl-paysuccess__btn" @click="getCode"> 确认支付 </view>
		</view>
	</view>
</template>
<script>
	import {
		BaseUrl
	} from "../../utils/req.js";
	export default {
		name: "paysuccess",
		components: {},
		mixins: [],
		props: {},
		data() {
			return {
				BaseUrl,
				isFinite: 1, //选为选中
				balance: 0, // 余额
				order_id: "", //订单id
				order_type: "", //订单类型
				token: "",
				typex: "",
				orderInfo: {},
				allPrice: 0,
				paynow: 0,
				orderPayData: {},
				code: "",
				method: "",
			};
		},
		computed: {},
		watch: {},
		onShow() {
			this.getBalance();
		},
		onLoad(e) {
			// this.order_id = e.order_id;
			// this.order_type = e.order_type;
			// this.token = e.token;
			if (e.PayNow == 1) {
				this.paynow = e.PayNow;
				this.order_id = e.order_id;
				this.order_type = e.order_type;
				this.getPayMsg();
				return;
			}
			this.getBalance();
			if (uni.getStorageSync("orderPay")) {
				this.orderInfo = uni.getStorageSync("orderPay");
				this.orderInfo.list.forEach((item) => {
					this.allPrice += Number(item.price);
					this.allPrice <= 0 ? (this.allPrice = 0.01) : this.allPrice;
				});
				// this.allPrice = this.allPrice - this.orderInfo.list[0].coupon_price;
				// this.allPrice <= 0 ? (this.allPrice = 0.01) : this.allPrice;
				uni.removeStorageSync("orderPay");
				console.log(1);
			} else {
				this.order_id = e.order_id;
				this.order_type = e.order_type;
				this.getPayMsg();
				console.log(2);
			}
			console.log(this.orderInfo, "订单信息++++++++++++++++++++++++++++++++");
		},
		methods: {
			//确认支付
			getCode() {
				uni.login({
					provider: "weixin",
					success: (res) => {
						if (res.code) {
							this.code = res.code;
							console.log(this.code);
							this.onSubmit();
						}
					} ,
					fail: (err) => {
						console.log(err);
					}
				})	
			},
			 onSubmit() {
				if (this.isFinite == 1) {
					this.typex = "balance";
					this.method = "miniapp";
				} else if (this.isFinite == 2) {
					this.typex = "alipay";
					this.method = "miniapp";
				} else if (this.isFinite == 3) {
					this.typex = "wechat";
					this.method = "miniapp";
				}

				if (this.orderInfo.list) {
					let order_id = [];
					this.orderInfo.list.forEach((item) => {
						order_id.push(item.order_id);
					});
					let data1 = {
						order_id: order_id,
						order_type: "goods",
						token: this.orderInfo.token,
						method: this.method,
						type: this.typex,
						code: this.code
					};
					this.$request
						.post("api/wanlshop/pay/payment", data1)
						.then((res) => {
							if(this.typex == 'wechat'){
								uni.requestPayment({
									provider: 'wxpay',
									timeStamp: res.data.timeStamp,
									nonceStr: res.data.nonceStr,
									package: res.data.package,
									signType: res.data.signType,
									paySign: res.data.paySign,
									appId: res.data.appId,
									success: function (res) {
										uni.redirectTo({
											url: "/pages/page/success",
										})
									},
									fail: function (err) {
										uni.showToast({
											title: '支付失败',
											icon: 'none'
										})
									}
								})
							}else{
								console.log(res, "支付结果");
								if (res.code == 1) {
									uni.redirectTo({
										url: "/pages/page/success",
									});
								}
								uni.showToast({
									title: res.msg,
									icon: "none",
								});
							}
						})
						.catch((error) => {
							uni.showToast({
								title: error.msg,
								icon: "none",
							});
						});
				} else {
					let data2 = {
						order_id: this.orderPayData.order_id,
						order_type: this.orderPayData.order_type,
						token: this.orderPayData.token,
						method: this.method,
						type: this.typex,
						code: this.code
					};
					this.$request
						.post("api/wanlshop/pay/payment", data2)
						.then((res) => {
							if(this.typex == 'wechat'){
								uni.requestPayment({
									provider: 'wxpay',
									timeStamp: res.data.timeStamp,
									nonceStr: res.data.nonceStr,
									package: res.data.package,
									signType: res.data.signType,
									paySign: res.data.paySign,
									appId: res.data.appId,
									success: function (res) {
										uni.redirectTo({
											url: "/pages/page/success",
										})
									},
									fail: function (err) {
										uni.showToast({
											title: '支付失败',
											icon: 'none'
										})
									}
								})
							}else{
								console.log(res, "支付结果");
								if (res.code == 1) {
									uni.redirectTo({
										url: "/pages/page/success",
									});
								}
							}
						})
						.catch((error) => {
							uni.showToast({
								title: error.msg,
								icon: "none",
							});
						});
				}
			},
			getPayMsg() {
				this.$request
					.post("api/wanlshop.pay/getPay", {
						order_id: this.order_id,
						order_type: this.order_type,
					})
					.then((res) => {
						if (res.code == 1) {
							console.log(res, "获取支付信息");
							this.orderPayData = res.data;
						}
					})
					.catch((error) => {
						console.log(error);
						uni.showToast({
							title: error.msg,
							icon: "none",
						});
					});
			},
			clickThis(e) {
				this.isFinite = e;
			},
			// 选择余额支付，，，获取余额数据
			getBalance() {
				this.$request.post("api/wanlshop/pay/getBalance").then((res) => {
					console.log(res.data, "余额---------------------------------");
					this.balance = res.data;
				});
			},
		},
	};
</script>
<style lang="scss" scoped>
	/deep/.u-radio {
		// margin: 20rpx;
	}

	.paysuccess {
		background-color: #fff;
		padding: 30rpx;

		.wanl-paysuccess {
			.paysuccess__success {
				text-align: center;
				margin: 45rpx 0;

				.success__text {
					font-size: 24rpx;
					color: #828282;
				}

				.dingdan1 {
					display: block;
					font-size: 70rpx;
					color: #333;
					margin-top: 20rpx;
				}
			}

			.wanl-paysuccess__img {
				.img__success {
					.wanl-success__text {

						// display: flex;
						.success {
							display: flex;
							align-items: center;
						}

						.item-icon {
							width: 40rpx;
							height: 40rpx;
							border: 1px solid #aca5aa;
							border-radius: 50%;
						}

						.item-icon1 {
							position: relative;

							/* 边框 */
							border: 20rpx solid #fe6508;
							border-radius: 50%;
							/* 填充色 */
							background-color: #fe6508;

							/* 白色间隔 */
							&::before {
								content: "";
								position: absolute;
								top: -1px;
								left: -1px;
								right: -1px;
								bottom: -1px;
								border: 1px solid white;
								border-radius: inherit;
							}
						}

						.item-text {
							margin-left: 20rpx;
						}

						.item-success {
							margin: 20rpx 0;
							display: flex;
							align-items: center;
							justify-content: space-between;

							image {
								width: 40rpx;
								height: 40rpx;
								// border: 1px solid red;
							}

							.text-1 {
								font-size: 30rpx;
								color: #333;
							}

							.text-2 {
								margin: 20rpx 0;
								font-size: 26rpx;
								display: block;
								color: #b8ada9;
							}
						}
					}
				}
			}

			.wanl-paysuccess__btn {
				text-align: center;
				color: #fff;
				padding: 30rpx 0;
				width: 100%;
				margin: 40rpx 0;
				box-sizing: border-box;
				background: #fe6508;
			}
		}
	}
</style>